<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="head" :style="{backgroundColor:'rgba(255,255,255,'+headOpacity+')',borderColor:'rgba(229,229,229,'+headOpacity+')'}">
				<view class="back" @tap="drawBack()" :style="{backgroundColor: headOpacity < 0.5?'rgba(0,0,0,0.65)':'rgba(0,0,0,0)'}">
					<image v-if="headOpacity < 0.5" src="/static/icon/white-back.png" mode=""></image>
					<image v-if="headOpacity >= 0.5" src="/static/login/back.png" mode=""></image>
				</view>
				<view class="heart" v-if="isCleaner" @tap="follow()">
					<image v-if="headOpacity < 0.5" :src="info.is_follow == 1?'/static/icon/heart-red.png':'/static/icon/heart-white-h.png'" mode=""></image>
					<image v-if="headOpacity >= 0.5" :src="info.is_follow == 1?'/static/icon/heart-red.png':'/static/icon/heart-333-h.png'" mode=""></image>
				</view>
				<view class="more" v-if="isCleaner" @tap="total(0)">
					<image v-if="headOpacity < 0.5" src="/static/icon/more-fff.png" mode=""></image>
					<image v-if="headOpacity >= 0.5" src="/static/icon/more-333.png" mode=""></image>
				</view>
				<view class="text" :style="{color:'rgba(51, 51, 51,'+headOpacity+')'}">
					{{info.name}}
				</view>
			</view>
			<view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
					<view class="swiper-box">
						<swiper class="swiper" circular="true" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" @change="swiChange">
						    <swiper-item v-for="(item, index) in imgList" :key="index">
						        <view class="swiper-item ">
									<image :src="item + '?imageView2/1/w/1500/h/770'" mode="widthFix"></image>
								</view>
						    </swiper-item>
						</swiper>
						<view class="bot_bg">
							<image src="/static/bg/bot_bg.png" mode=""></image>
						</view>
						<view class="num_index">
							<text class="c_fff">{{swiIndex}}</text>
							<text class="c_999">/{{imgList.length}}</text>
						</view>
					</view>
					
					<view class="hotel_info line">
						<view class="hotel_img">
							<image :src="info.hotel_logo + '?imageView2/1/w/200/h/200'" mode=""></image>
						</view>
						<view class="hotel_title">
							<view class="text1">{{info.name}}</view>
							<view class="text2">已被{{info.fans}}人关注</view>
						</view>
					</view>
					
					<view class="hotel_adress line">
						<view class="adress_left" @tap="gdAdress()">
							<view class="text1">详细地址</view>
							<view class="text2">
								<view class="adress_icon">
									<image src="/static/icon/adress.png" mode=""></image>
								</view>
								<view class="adress_text">
									<view class="text_centent">{{info.hotel_address}}</view> 
								</view>
								
							</view>
						</view>
						<view class="adress_right" @tap="call(info.juridical_person_phone)">
							<image src="/static/icon/telephone.png" mode=""></image>
						</view>
					</view>
					
					
					<view class="line_chart line uni-clearfix"> 
						<view class="title">本月已累计完成{{orderNum}}单客房打扫</view>
						<view class="chart_img">
							<mpvue-echarts v-if="ecHave" class="ec-canvas" @onInit="lineInit" canvasId="line" ref="lineChart" />
						</view>
					</view>
					
					<view class="basic_info line">
						<view class="text1">基本信息</view>
						<view class="text2 uni-clearfix">
							<text class="text_left">酒店名称</text>
							<text class="text_right">{{info.name}}</text>
						</view>
					</view>
					
					<view class="text_info line" @tap="call(info.juridical_person_phone)">
						<view class="text2 uni-clearfix">
							<text class="text_left">客服电话</text>
							<text class="text_right">{{info.juridical_person_phone}}</text>
						</view>
					</view>
					
					<view class="text_info line">
						<view class="text2 uni-clearfix">
							<text class="text_left">酒店资质</text>
							<text class="text_right">{{info.hotel_auth == 1?'已认证':'未认证'}} </text>
						</view>
					</view>
					
				</scroll-view>
			</view>
			<jc-popUp position="bottom" ref="popx" :flag="flag" markTapHide="true">
				<view class="footer">
					<view class="item">确定拉黑该酒店?</view>
					<view class="item" @tap="total(1)">确定</view>
					<view class="item" @tap="total(2)">取消</view>
				</view>
			</jc-popUp>
		</view>
	</view>
</template>
<script>
	import * as echarts from '@/components/echarts/echarts.simple.min.js';
	import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';
	import jcPopUp from '@/components/jc-popUp/jc-popUp.vue';
	let lineOption = {
		animation: false,
		color: ['#f93735'],
		grid: {
			x: 35,
			x2: 10,
			y: 30,
			y2: 25
		},
		calculable: false,
		xAxis: [{
			type: 'category',
			data: ['2-1', '2-2', '2-3', '2-4', '2-5', '2-6', '2-7']
		}],
		yAxis: [{
			type: 'value',
			splitArea: {
				show: true
			}
		}],
		series: [{
			name: '订单',
			type: 'line',
			data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
		}]
	},id;
	export default {
		onLoad(e){
			id = e.id;
			console.log(e);
			this.initialization();
		},
		data() { 
			return {
				echarts: echarts,
				updateStatus: false,
				headOpacity:0,
				imgList:[],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				swiIndex:1,
				info:{
					is_follow:0
				},
				ecHave:false,
				orderNum:0
			}
		},
		components: {
			mpvueEcharts,
			jcPopUp
		},
		methods: {
			upper: function(e) {
				console.log(e)
				this.headOpacity = 0;
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop;
				this.headOpacity = +e.detail.scrollTop*0.02;
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			swiChange(e){
				this.swiIndex = e.detail.current + 1;
			},
			lineInit(e) {
				let {width, height} = e ;
				let canvas = this.$refs.lineChart.canvas 
				echarts.setCanvasCreator(() => canvas);
				let lineChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(lineChart)
				lineChart.setOption(lineOption)
				this.$refs.lineChart.setChart(lineChart)
			},
			getData(){
				return new Promise((res)=>{
					this.req({
						url:'user/hotel',
						id:id,
						method:'get',
						data:{
							show_month_order_list:true,
							uid:this.isLogin().id
						}
						
					},(data)=>{

						res(data.data);

						
					},(data)=>{
						res(data.data);
					});
				});
			},
			async initialization(){
				let res = await this.getData();
				if(res.status == 1){
					this.info = res.data;
					this.imgList = JSON.parse(res.data.hotel_images);
					lineOption.xAxis[0].data = this.filterData(res.data.month_order_list,'months');
					lineOption.series[0].data = this.filterData(res.data.month_order_list,'order_count');
					let orderNum = res.data.month_order_list[res.data.month_order_list.length - 1] || {order_count:0};
					this.orderNum = orderNum.order_count;
					this.ecHave = true;
				}else{
					uni.showToast({
						icon:'none',
						title:'服务器繁忙，请稍后重试'
					});
				}
				
			},
			/**
			 * 高德地图
			 */
			gdAdress(){
				this.mapNavigation(this.info.hotel_latitude,this.info.hotel_longitude,this.info.name); 
			},
			/**
			 * 过滤数据
			 */
			filterData(arr,key){
				let newArr = [];
				console.log(arr);
				if(arr.length != 0){
					arr.forEach((v,i)=>{
						newArr.push(v[key]);
					});
				}
				
				return newArr;
			},
			/**
			 * 
			 */
			call(val){
				uni.makePhoneCall({
					phoneNumber: val //仅为示例
				});
			},
			/**
			 * 关注
			 */
			async follow(){

				if(this.info.is_follow == 1){
					let res = await this.pullBlack(1);
					if(res.status == 1){
						this.info.is_follow = 0;
					}else{
						uni.showToast({
							icon:'none',
							title:res.message
						})
					};
				}else{
					let res = await this.addFollow(1);
					if(res.status == 1){
						this.info.is_follow = 1;
					}else{
						uni.showToast({
							icon:'none',
							title:res.message
						})
					};
					
				}
			},
			/**
			 * 加关注1 或者 拉黑2
			 */
			addFollow(type){
				return new Promise((res)=>{
					this.req({
						url:'both/listSetup',
						data:{
							host_id:this.isLogin().id,
							guest_id:this.info.id,
							setup_type:type,
							app_type:this.isLogin().type
						}
					},(data)=>{
						res(data.data);
					})
				});
			},
			/**
			 * total 拉黑按钮
			 */
			async total(val){
				
				switch (val){
					case 0:
						this.$refs.popx.show();
						break;
					case 1:
						this.$refs.popx.hide();
						let  res = await this.addFollow(2);
						if(res.status == 1){
							uni.showToast({
								title: res.title, 
								icon: 'none'
							});
						}else{
							uni.showToast({
								title:res.message,
								icon: 'none'
							});
						}
						
						
						
					
						break;
					case 2:
						
						this.$refs.popx.hide();
						break;
					default:
						break;
				}
				
				
			},
			/**
			 * 取消 拉黑2 或者 取消关注1
			 */
			pullBlack(type){
				
				return new Promise((res)=>{
					this.req({
						url:'both/listSetup',
						method:'delete',
						id:this.isLogin().id,
						data:{
							guest_id:this.info.id,
							setup_type:type,
							app_type:this.isLogin().type
						}
					},(data)=>{
						res(data.data);
					},(data)=>{
						uni.showToast({
							icon:'none',
							title:'服务器繁忙，请稍后重试'
						});
					});
				});
				
			},
			
			/**
			 * 返回上一页
			 */
			drawBack() {
				uni.navigateBack({
					delta: 1,
					"animationType": this.GLOBAL.backAnimation,
					"animationDuration": this.GLOBAL.animationTime
				});
			},
			// isCleaner
			
			
		},
		computed:{
			isCleaner(){
				return this.isLogin().type == 1?true:false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750upx;
		height: 320upx;
		background-color: #ffffff;
		.item:nth-child(1) {
			font-size: 24upx;
			color: #999999;
			border-bottom: 1upx solid #e5e5e5;
		}
		.item:nth-child(2) {
			border-bottom: 19upx solid #e5e5e5;
		}
		.item {
			height: 100upx;
			line-height: 100upx;
			font-size: 28upx;
			text-align: center;
		}
	}
	.swiper-box{
		width: 100vw;
		height: 385upx;
		position: relative;
		.bot_bg{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 63upx;
			z-index: 5;
			image{
				float: left;
				width: 100%;
				height: 100%;
			}
		}
		.num_index{
			position: absolute;
			bottom: 78upx;
			right: 37upx;
			width: 70upx;
			height: 70upx;
			font-size: 24upx;
			line-height: 70upx;
			color: #ffffff;
			text-align: center;
			border-radius:50%; 
			background-color:rgba(0,0,0,0.65);
			.c_fff{
				font-size: 32upx;
			}
			.c_999{
				color: #999999;
			}
		}
	}
	.scroll-Y {
		height: 100vh;
		.swiper{
			height: 385upx;
			.swiper-item{
				width: 100%;
				height: 100%;
				image{
					width: 100%;
					height: 100%;
				}
			}
			
		}
		.hotel_info{
			width: 100%;
			height: 184upx;
			position: relative;
			.hotel_img{
				float: left;
				margin-left: 24upx;
				margin-top: 42upx;
				width: 100upx;
				height: 100upx;
				border-radius: 8upx;
				border: 2upx solid #999999;
				box-sizing: border-box;
				image{
					float: left;
					width: 100%;
					height: 100%;
					border-radius: 8upx;
				}
			}
			.hotel_title{
				float: left;
				margin-top: 49upx;
				margin-left: 34upx;
				
				.text1{
					font-size: 32upx;
					color: #333333;
					line-height: 1;
				}
				.text2{
					margin-top: 30upx;
					color: #999999;
					font-size: 28upx;
					line-height: 1;
					
					
				}
			}
		}

		.hotel_adress{
			width: 100%;
			height: 230upx;
			position: relative;
			.adress_left{
				float: left;
				margin-left: 24upx;
				width: 590upx;
				height: 100%;
				.text1{
					margin-top: 50upx;
					font-size: 32upx;
					color: #333333;
					line-height: 1;
				}
				.text2:after{
					content: '';
					position: absolute;
					top: 56upx;
					right: 0;
					width: 1upx;
					height: 37upx;
					background-color:#e5e5e5;
				}
				.text2{
					position: relative;
					height: 149upx;
					
					
					.adress_icon{
						float: left;
						width: 48upx;
						height: 100%;
						display: flex;
						align-items: center;
						image{
							width: 26upx;
							height: 26upx;
						}
					}
					.adress_text{
						float: left;
						width: 472upx;
						height: 100%;
						font-size: 28upx;
						line-height: 42upx;
						color: #999999;
						display: flex;
						align-items: center;
						
					}
					
				}
			}
			.adress_right{
				float: left;
				width: 111upx;
				height: 100%;
				
				image{
					
					margin: 0 auto;
					margin-top: 137upx;
					display: block;
					width: 34upx;
					height: 34upx;
				}
			}
		}
		.line_chart{
			width: 100%;
			height: 408upx;
			position: relative;
			box-sizing: border-box;
			padding-top: 50upx;
			.title{
				margin-left: 24upx;
				font-size: 32upx;
				color: #333333;
				line-height: 1;
			}
			.chart_img{
				width: 100%;
				height: 244upx;
			}
		}
		.basic_info{
			box-sizing: border-box;
			padding: 48upx 0 40upx 0;
			font-size: 32upx;
			color: #333333;
			position: relative;
			.text1{
				margin-left: 24upx;
				line-height: 1;
			}
			.text2{
				margin-left: 24upx;
				width: calc(100% - 48upx);
				margin-top: 63upx;
				line-height: 1;
				font-size: 28upx;
				.text_left{
					float: left;
				}
				.text_right{
					float: right;
					color: #999999;
				}
			}
		}
		.text_info{
			position: relative;
			height: 110upx;
			box-sizing: border-box;
			padding: 43upx 24upx;
			.text2{
				font-size: 28upx;
				.text_left{
					color: #333333;
					float: left;
				}
				.text_right{
					color: #999999;
					float: right;
				}
			}
		}
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300upx;
		line-height: 300upx;
		text-align: center;
		font-size: 36upx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300upx;
		line-height: 300upx;
		text-align: center;
		font-size: 36upx;
	}
	.head{
		height: calc(var(--status-bar-height) + 88upx);
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 6;
		box-sizing: border-box; 
		border-bottom: 1upx solid;
		.back{
			position: absolute;
			left: 24upx;
			bottom: 18upx;
			width: 50upx;
			height: 50upx;
			background-color: rgba(0,0,0,0.65);
			border-radius:50%; 
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 32upx;
				height: 32upx;
			}
		}
		.heart{
			position: absolute;
			right: 102upx;
			bottom: 18upx;
			width: 50upx;
			height: 50upx;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 36upx;
				height: 36upx;
			}
		}
		.more{
			position: absolute;
			right: 24upx;
			bottom: 18upx;
			width: 50upx;
			height: 50upx;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 36upx;
				height: 36upx;
			}
		}
		.text{
			float: left;
			margin-top:var(--status-bar-height);
			height: 88upx;
			width: 100%;
			text-align: center;
			line-height: 88upx;
			font-size: 36upx;
			
		}
	}
	.line:after{
		content: '';
		position: absolute;
		height: 1upx;
		width: calc(100% - 48upx);
		left: 24upx;
		bottom: 0;
		background: #e5e5e5;
		transform: scaleY(0.5);
	}
</style>